/* 
1 页面挂载完毕后  
  1 获取到当前城市下的区域的房源数据 
    0 好客租房 为每一个地区的中文名 都生成了唯一的id值 
      后台的数据原因:房源数据 目前只有 北京 广州 深圳 上海 有房源 
      {广州:1234,深圳:2345 ...}

    1 将广州城市名发送到后台 后台 返回 当前城市的id
    2 将城市的id发送到后台 就会将 id对应下的房源数据返回


  2 将这些房源数据-数组 结合百度地图的 描绘覆盖物API 显示在地图上 

2 点击地图上的房源元素之后
  1 先绑定点击事件
  2 获取被点击的元素的 id
  3 根据id 获取 该房源下的数据 房源数组
  4 对房源数组做循环 
    1 描绘房源覆盖物 

3 代码的封装 (把相同的部分 存起来 把不同的部分 变成 参数 )
  1 页面加载完毕之后的 业务  和 label标签的的点击事件的 业务 很相似 
    共同点 : 获取id  获取 房源数组  循环显示 

4 label点击事件
  0 清除覆盖物  clearOverlays
  1 调用 drawHouse()  

5 每一次显示地图的 变化
  1 label 圆圈   放大倍数 11 click : 加载下一层 
  2 label 圆圈   放大倍数 12 click : 加载下一层 
  3 label 矩形   放大倍数 13 click : 从下往上 显示 房屋列表 

6 最后一次点击房源
  1 从下往上显示 div 
  2 同时 发送请求 获取被点击的房屋的信息 
    将房屋的信息 渲染在 div 上  houses?cityId = AREA|7a88d9f4-9640-3384

7 拖动地图 房屋列表重新隐藏 dragstart

 */

import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { BMap } from "../../utils/baiduMap";
import Css from "./index.module.scss";
import { connect } from "react-redux";
import { request } from "../../utils/request";
import HouseItem from "../../components/HouseItem";


console.log("地图找房");


let map = null;
class MapFound extends Component {

  state = {
    // 房屋列表是否显示 
    showDetail: false,
    // 房屋信息列表
    list: []
  }

  getMapInfo = (function () {
    //  1 在第一个方法中 声明你要缓存的数据
    let list = [{ times: 1, cls: "circle", zoom: 11 }, { times: 2, cls: "circle", zoom: 13 }, { times: 3, cls: "rect", zoom: 15 }]
    //  地图的显示的次数
    let index = -1;
    return function () {
      // 2 第二个方法 会经常被调用- 还需要返回 新的数据 
      return list[++index];
    }
  })()

  async componentDidMount() {



    const cityName = this.props.cityName
    // const cityName="广州";
    // 要使用对应的id
    map = new BMap.Map("map_container");

    // 地图绑定 拖动事件
    map.addEventListener("dragstart", () => {
      this.setState({ showDetail: false });
    })
    // 添加 缩放控件
    map.addControl(new BMap.NavigationControl());
    // 比例尺
    map.addControl(new BMap.ScaleControl());

    // 获取当前城市的id值
    const id = (await request.get("/area/info?name=" + cityName)).data.body.value;
    this.drawHouse(id, cityName);
  }

  // 描绘房源 
  // id 房源的id
  // address 经纬度  城市名称 
  drawHouse = async (id, address) => {
    // 获取了一个对象 存放的是的地图外观相关的信息
    const mapInfo = this.getMapInfo();

    map.centerAndZoom(address, mapInfo.zoom);
    // 获取该地区下的房源数据了
    const houseList = (await request.get("/area/map?id=" + id)).data.body;
    // 循环 描绘覆盖物
    houseList.forEach(v => {
      // ==================
      // 生成 房源对应的 点对象 
      const point = new BMap.Point(v.coord.longitude, v.coord.latitude);
      // 配置信息 
      const opts = {
        position: point,    // 指定文本标注所在的地理位置
        offset: new BMap.Size(0, 0)    //设置文本偏移量
      }
      // 类名  class 还是 clasName
      // 使用class   因为 这个div 没有经过react的处理 是百度地图 直接  innerhtml 
      // const label = new BMap.Label(`<div class="${Css.circle}" > <span>${v.label}</span>  <span>${v.count}套</span> </div>`, opts);  // 创建文本标注对象
      const label = new BMap.Label(`<div class="${Css[mapInfo.cls]}" > <span>${v.label}</span>  <span>${v.count}套</span> </div>`, opts);  // 创建文本标注对象

      // 设置样式 
      label.setStyle({
        border: "none",
        backgroundColor: "transparent"
      });

      // 2.1 绑定点击事件 
      // 难道 原生的事件的执行函数  能使用async !
      // 百度地图的自己的封装元素的 事件函数  不支持 async !! 
      label.addEventListener("click", () => {
        const newId = v.value;
        const newPoint = new BMap.Point(v.coord.longitude, v.coord.latitude);

        // 判断是不是到了最后一个层级了
        if (mapInfo.times === 3) {
          // 显示房屋列表
          this.setState({ showDetail: true });
          this.getHouseList(newId);
        } else {
          // 清除覆盖物
          // 在我自己的点击事件中 清除我自己 
          // 事件循环 微任务宏 任务 定时器 promise ... 
          setTimeout(() => {
            map.clearOverlays();
          }, 0);
          // console.log(v);
          // this.drawHouse();
          // 获取循环元素中的 id 
          // new BMap.Point(116.404, 39.915)

          this.drawHouse(newId, newPoint);
        }

      })
      // 把设置好的文本添加到 地图上 
      map.addOverlay(label);
      // ==================
    })

  }

  // 根据id 获取房屋列表数据(房屋名称 图片 等等介绍信息)
  getHouseList = async (id) => {
    const list = (await request.get("houses?cityId=" + id)).data.body.list;
    this.setState({ list });
  }

  render() {
    const { showDetail, list } = this.state;
    return (
      <div className={Css.map_found} >
        {/* 1.0 导航栏 开始 */}
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.goBack()}
        >地图找房</NavBar>
        {/* 1.0 导航栏 结束 */}

        {/* 2.0 内容 开始 */}
        <div className={Css.map_main}>

          {/* 2.1 地图 开始 */}
          <div className={Css.map_container} id="map_container" ></div>
          {/* 2.1 地图 结束 */}
          {/* 2.2 房子列表 开始 */}
          {showDetail && <div className={Css.house_list}>
            <div className={Css.house_list_title}> <span>房屋列表</span> <span>更多房源</span> </div>
            <div className={Css.house_list_content}>
              {list.map((v, i) => <div key={i} className={Css.house_list_item} >
                <HouseItem houseItem={v} />
              </div>)}
            </div>
          </div>}
          {/* 2.2 房子列表 结束 */}
        </div>
        {/* 2.0 内容 结束 */}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  cityName: state.mapReducer.city.name
})

export default connect(mapStateToProps)(MapFound);